<template>
  <Spin :spinning="loading" size="large" tip="加载中...">
    <PageWrapper :class="prefixCls" :contentFullHeight="true">
      <div :class="`${prefixCls}__content`">
        <List>
          <Row :gutter="[24, 32]">
            <template v-for="item in cardList" :key="item.title">
              <Col :span="4" @click="clickGo(item)">
                <List.Item>
                  <Card :hoverable="true" :class="`${prefixCls}__card`">
                    <div class="lg:flex">
                      <div class="lg:w-2/10 flex items-center mr-2">
                        <img :src="imgUrl" alt="" class="w-full" />
                      </div>
                      <div class="lg:w-8/10">
                        <div :class="`${prefixCls}__card-title flex items-center justify-between`">
                          <div class="fontSize-32 px">{{ item.code }}</div>
                          <DictLabel :dictType="'bas_mes_dev_status'" :dictValue="item.devStatus" />
                        </div>
                        <div :class="`${prefixCls}__card-title`"> {{ item.pointValue }} (An) </div>
                      </div>
                    </div>
                  </Card>
                </List.Item>
              </Col>
            </template>
          </Row>
        </List>
      </div>
    </PageWrapper>
  </Spin>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsMesElectrovalenceList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  // import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, List, Spin } from 'ant-design-vue';
  import { devListData } from '/@/api/mes/card/mesDev';
  import { DictLabel } from '/@/components/Dict';
  import { useGo } from '/@/hooks/web/usePage';
  import imgUrl from '/@/assets/images/jitai.png';

  const loading = ref(false);
  const cardList = ref([]);
  const go = useGo();

  async function getDevList() {
    loading.value = true;
    try {
      const res = await devListData();
      cardList.value = res;
    } finally {
      loading.value = false;
    }
  }

  function clickGo(item) {
    const url = ref('/mes/electrovalence/list');
    go(url.value + '?code=' + item.code);
  }
  getDevList();
  console.log(cardList);

  const prefixCls = 'list-card';
</script>
<style lang="less" scoped>
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }

    &__card {
      width: 100%;
      margin-bottom: -8px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        color: @text-color-base;
        font-size: 16px;
        font-weight: 500;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
        .fontSize-32 {
          font-size: 32px !important;
          font-weight: bold !important;
        }
        .fontSize-16 {
          font-size: 32px !important;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        color: @text-color-secondary;
        font-size: 14px;
      }

      &-dict {
        // position: absolute;
        // top: 10px;
        // right: 10px;
        .jeesite-dict-label {
          position: absolute !important;
          top: 10px !important;
          right: 10px !important;
          font-size: 24px !important;
          // deep: v-deep;
          ::v-deep .ant-tag {
            margin-right: 10px;
            font-size: 24px !important;
            font-weight: bold !important;
          }
        }
      }
    }
  }
</style>
